<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout/blank"><!-- layout文件路径-->
<head>
    <title>数据字典</title>
</head>
<body>
<div layout:fragment="content">
    <div class="card">
        <div class="card-body">
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var query_url = "/dictionary/query.do";
    var edit_url = "/dictionary/oper";
    $(document).ready(function () {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        });

        $(grid_selector).jqGrid({
            url: query_url,
            datatype: "json",
            mtype: 'post',
            height: '100%',
            colNames: ['id', '名称', '值', '备注名'],
            colModel: [{
                name: 'id',
                index: 'id',
                width: 90,
                key: true,
                hidden: false, sortable:false,
                editable: false,
            }, {
                name: 'keyNo',
                index: 'keyNo',
                width: 90,
                align: 'center',
                editable: true
            }, {
                name: 'keyValue',
                index: 'keyValue',
                width: 90,
                align: 'center',
                sortable:false,
                editable: true,
            }, {
                name: 'caption',
                index: 'caption',
                width: 90,
                align: 'center', sortable:false,
                editable: true,
            }, ],
            viewrecords: true,
            rowNum: 20,
            rowList: [20, 30, 50],
            pager: pager_selector,
            altRows: true,
            gridview: true,
            editurl: edit_url,

            multiselect: true,
            multiboxonly: true,
            loadComplete: function () {
                $(grid_selector).closest(".ui-jqgrid-bdiv").css({'overflow-x': 'hidden'});
                var table = this;
            },
            caption: "数据字典",
            autowidth: true

        });
        $(window).triggerHandler('resize.jqGrid'); // trigger window resize
        $(grid_selector).jqGrid('navGrid', pager_selector, {
            del: true,
            add: true,
            edit: true,
            search: true
        }, {}, {}, {}, {multipleSearch: true});
        //$(grid_selector).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        $(grid_selector).jqGrid('navGrid', pager_selector, {
            //search form
            recreateForm: true,
            afterShowSearch: function (e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                style_search_form(form);
            },
            afterRedraw: function () {
                style_search_filters($(this));
            }
            ,
            multipleSearch: true,
            /**
             multipleGroup:true,
             showQuery: true
             */
        })

        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }

        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }
    });


</script>